<template>
  <div class="config-organization">
    <h2 class="title f1">班级学情状态配置</h2>
    <div class="card f-14" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <template v-if="permission">
        <div class="fr ac item">
          <div class="label">建议停课</div>
          <div class="fr ac" style="width: 450px;">
            <span>预警阈值</span>
            <div class="ml-30 mr-10" style="width: 60px;">
              <el-input v-model="form.proposecount"/>
            </div>
            <span>人</span>
          </div>
          <div class="f3 f-14">*为班级风险字段（比如：体温异常人数）</div>
        </div>
        <div class="fr ac item">
          <div class="label">建议复学</div>
          <div class="fr ac" style="width: 450px;">
            <span>预警阈值</span>
            <span class="ml-30">少于</span>
            <div class="ml-10 mr-10" style="width: 60px;">
              <el-input v-model="gobacktoschool[0]"/>
            </div>
            <span>人</span>
            <div class="ml-30 mr-10" style="width: 60px;">
              <el-input v-model="gobacktoschool[1]"/>
            </div>
            天
          </div>
          <div class="f3 f-14">*比如，1人，14天无体温异常（风险字段）</div>
        </div>
        <div class="fr ac item">
          <div class="label">消息通知</div>
          <div class="fr ac">
            <span class="checkbtn" :class="{ on: newsnotifycode.includes('1') }"><span class="a" @click="toggle('newsnotifycode', '1')">校长</span></span>
            <span class="checkbtn" :class="{ on: newsnotifycode.includes('2') }"><span class="a" @click="toggle('newsnotifycode', '2')">班主任</span></span>
            <span class="checkbtn" :class="{ on: newsnotifycode.includes('3') }"><span class="a" @click="toggle('newsnotifycode', '3')">家长/紧急联系人</span></span>
          </div>
        </div>
        <div class="fr ac item">
          <div class="label">通知方式</div>
          <div class="fr ac">
            <span class="checkbtn" :class="{ on: noticemode.includes('1') }"><span class="a" @click="toggle('noticemode', '1')">手机短信</span></span>
            <span class="checkbtn" :class="{ on: noticemode.includes('2') }"><span class="a" @click="toggle('noticemode', '2')">手机通话</span></span>
          </div>
        </div>
        <div class="tc mt-30">
          <el-button type="primary" @click="submit">保存</el-button>
        </div>
      </template>
      <no-right v-else/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'config-organization',
    data () {
      return {
        loading: false,
        form: {
          id: '',
          schoolno: '',
          schoolname: '',
          personincharge: '',
          proposecount: '',
          gobacktoschool: '',
          newsnotifycode: '',
          noticemode: ''
        },
        gobacktoschool: ['', ''],
        newsnotifycode: [],
        noticemode: []
      }
    },
    computed: {
      permission () {
        const { roleid } = this.$store.state
        return [1005].includes(roleid)
      }
    },
    methods: {
      getDetail () {
        const { schoolno } = this.$store.state.classinfo

        this.loading = true
        this.$http('/organizeplan/getmanage', { schoolno }).then(
          res => {
            const data = res.data || {}
            for (const k in this.form) {
              this.form[k] = data[k] || ''
            }
            this.gobacktoschool = this.form.gobacktoschool ? this.form.gobacktoschool.split(',') : ['', '']
            this.newsnotifycode = this.form.newsnotifycode ? this.form.newsnotifycode.split(',') : []
            this.noticemode = this.form.noticemode ? this.form.noticemode.split(',') : []
            this.loading = false
          }
        )
      },
      toggle (key, val) {
        if (this[key].includes(val)) this[key].splice(this[key].indexOf(val), 1)
        else this[key].push(val)
      },
      submit () {
        const { schoolno } = this.$store.state.classinfo

        const form = JSON.parse(JSON.stringify(this.form))
        if (!form.id) {
          delete form.id
        }
        form.schoolno = form.schoolno || schoolno
        form.proposecount = ~~form.proposecount
        form.gobacktoschool = this.gobacktoschool.join(',')
        form.newsnotifycode = this.newsnotifycode.sort().join(',')
        form.noticemode = this.noticemode.sort().join(',')

        this.loading = true
        this.$http('/organizeplan/saveordupdate', form).then(
          res => {
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            })
          }
        ).finally(
          () => {
            this.loading = false
          }
        )
      }
    },
    created () {
      if (!this.permission) return
      this.getDetail()
    }
  }
</script>

<style lang="less">
.config-organization {
  .label {width: 150px;min-width: 150px;}
  .item {padding: 12px 0;color: rgba(255, 255, 255, .8);}
  .checkbtn {transition: color .2s;
    &.on {color: #00c8f1;}
  }
  .fr.ac .checkbtn {width: 120px;}
  .el-button--primary {width: 120px;}
}
</style>
